<template>
  <div class="pies-box">
    <div
      ref="pies"
      class="pies"
    >
    </div>
    <ul>
      <li
        v-for="(item, index) of data"
        :key="index"
      >{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Pies',
  props: {
    'data': {
      type: Array,
      default () {
        return [
          {
            title: '6月',
            data: [
              {value: 0, name: '偏轻'},
              {value: 0, name: '均值'},
              {value: 0, name: '肥胖'},
              {value: 0, name: '超重'}
            ]
          },
          {
            title: '7月',
            data: [
              {value: 0, name: '偏轻'},
              {value: 0, name: '均值'},
              {value: 0, name: '肥胖'},
              {value: 0, name: '超重'}
            ]
          },
          {
            title: '8月',
            data: [
              {value: 0, name: '偏轻'},
              {value: 0, name: '均值'},
              {value: 0, name: '肥胖'},
              {value: 0, name: '超重'}
            ]
          }
        ]
      }
    },
    'color': {
      type: Array,
      default () {
        return ['#315bff', '#7193ff', '#53e9ee', '#ffe98f', '#7343ff']
      }
    },
    'title': {
      type: String,
      default: ''
    },
    'pieSize': {
      type: Object,
      default () {
        return {
          radius: ['0%', '50%'],
          center: [['15%', '50%'], ['50%', '50%'], ['85%', '50%']],
          title: {
            top: 0,
            fontSize: 14
          }
        }
      }
    },
    'legendShow': {
      type: Boolean,
      default: true
    }
  },
  watch: {
    'data': {
      deep: true,
      handler: function () {
        this.draw()
      }
    }
  },
  computed: {
    dataName () {
      const arr = this.data[0].data.map((item, index) => {
        return item.name
      })
      return arr
    },
    series () {
      const arr = []
      for (let i = 0, len = this.data.length; i < len; i++) {
        arr.push({
          type: 'pie',
          data: this.data[i].data,
          radius: this.pieSize.radius,
          center: this.pieSize.center[i],
          selectedMode: 'single',
          hoverOffset: 2,
          selectedOffset: 5,
          clockwise: true,
          color: this.color,
          label: {
            normal: {
              textStyle: {
                fontSize: 12
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: '#587395'
              },
              length: 2
            }
          }
        })
      }
      return arr
    }
  },
  mounted () {
    this.draw()
    this.$common.winResize(this.$echarts.init(this.$refs.pies))
  },
  methods: {
    draw () {
      const $pies = this.$echarts.init(this.$refs.pies)
      const option = {
        title: {
          text: this.title,
          top: this.pieSize.title.top,
          left: 'center',
          textStyle: {
            color: '#4dd5ff',
            fontSize: this.pieSize.title.fontSize
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(7, 23, 71, .8)',
          padding: 10,
          borderColor: '#2c76c0',
          borderWidth: 1,
          textStyle: {
            color: '#45beed'
          }
        },
        legend: {
          show: this.legendShow,
          orient: 'horizontal',
          x: 'right',
          y: 'top',
          itemWidth: 10,
          itemHeight: 7,
          padding: 0,
          textStyle: {
            color: '#5676a9',
            fontSize: 12
          },
          data: this.dataName
        },
        series: this.series
      }
      $pies.setOption(option, true)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .pies-box
    position: relative
    width: 100%
    height: 100%
    .pies
      height: 100%
      width: 100%
    ul
      position: absolute
      bottom: 0
      left: 0
      width: 100%
      height: 50px
      li
        line-height: 50px
        float: left
        width: 33.3%
        text-align: center
      li:nth-child(1)
        width: 30%
      li:nth-child(2)
        width: 40%
      li:nth-child(3)
        width: 30%
</style>
